<template>
  <div>
    <bread first="商品管理"
           second="商品分类"></bread>

    <el-card>
      <el-button type="primary">添加分类</el-button>

      <!-- 树形表格组件 -->
      <zk-table ref="table"
                sum-text="sum"
                index-text="#"
                :data="data1"
                :columns="columns"
                :show-index="true"
                :expand-type="false"
                :selection-type="false">
        <template slot="level"
                  scope="scope">
          <i v-if="!scope.row.cat_deleted"
             class="el-icon-success"></i>
          <i v-else
             class="el-icon-circle-close"></i>
        </template>
        <template slot="caozuo">
          <el-button type="primary"
                     icon="el-icon-search">搜索</el-button>
          <el-button type="primary"
                     icon="el-icon-search">搜索</el-button>
        </template>
      </zk-table>
      <!-- 树形表格组件 -->

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage4"
                     :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>

      <!-- 分页 -->
    </el-card>

  </div>
</template>

<script>
import { goodsCateApi } from '@/api'
export default {
  name: '',
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    async getCate () {
      const res = await goodsCateApi(this.paramsObj)
      console.log(res, 666)
      this.data1 = res.data.data.result
    }
  },
  created () {
    this.getCate()
  },
  data () {
    return {
      paramsObj: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      currentPage4: 4,
      props: {
        stripe: false,
        border: false,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      data1: [
        {
          name: 'Jack',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 10,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                  children: [
                    {
                      name: 'Ashley',
                      sex: 'female',
                      likes: ['football', 'basketball'],
                      score: 20
                    },
                    {
                      name: 'Taki',
                      sex: 'male',
                      likes: ['football', 'basketball'],
                      score: 10,
                      children: [
                        {
                          name: 'Ashley',
                          sex: 'female',
                          likes: ['football', 'basketball'],
                          score: 20
                        },
                        {
                          name: 'Taki',
                          sex: 'male',
                          likes: ['football', 'basketball'],
                          score: 10
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10
            }
          ]
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10
                }
              ]
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10,
              children: [
                {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20
                },
                {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10
                }
              ]
            }
          ]
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20
        },
        {
          name: 'Tom',
          sex: 'male',
          likes: ['football', 'basketball'],
          score: 20,
          children: [
            {
              name: 'Ashley',
              sex: 'female',
              likes: ['football', 'basketball'],
              score: 20
            },
            {
              name: 'Taki',
              sex: 'male',
              likes: ['football', 'basketball'],
              score: 10
            }
          ]
        }
      ],
      columns: [

        {
          label: '分类名称',
          prop: 'cat_name',
          width: '400px'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'level',
          minWidth: '50px'
        },
        {
          label: '排序',
          prop: 'cat_level'
        },
        {
          label: '操作',
          minWidth: '200px',
          type: 'template',
          template: 'caozuo'
        }
      ]
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
